<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>房产：{{ house }} 套</h4>

    <button @click="changeToy">修改Child1的玩具</button>
    <button @click="changeComputer">修改Child2的电脑</button>
    <!--
      $event到底是啥?啥时候能.target：
       - 对于原生DOM事件【普通标签、原生DOM】，$event就是事件对象 =====>能.target。
       - 对于自定义事件【自定义标签、自定义事件】，$event就是触发事件时，所传递的数据==>不能.target。
     -->
    <!-- <button @click="getAllChild($event)">获取所有的子组件实例对象</button>-->

    <!-- 参数$refs的值是一个对象，包含所有的子组件实例对象 -->
    <button @click="getAllChild($refs)">让所有孩子的书变多</button>

    <!-- 使用ref等于c1给子组件Child1打标识，其中c1需要定义为响应书数据。组件标签上使用了ref就可以拿到子组件的实例对象了。 -->
    <Child1 ref="c1" />
    <!-- 使用ref等于c2给子组件Child2打标识，其中c2需要定义为响应书数据。组件标签上使用了ref就可以拿到子组件的实例对象了。 -->
    <Child2 ref="c2" />
  </div>
</template>

<script setup lang="ts" name="Father">
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'
import { ref } from 'vue'

// 需要定义为响应式数据c1、c2，结合组件标签上的ref进行使用
let c1 = ref()
let c2 = ref()

// 注意点：当访问obj.c的时候，底层会自动读取value属性，因为c是在obj这个响应式对象中的
/* let obj = reactive({
		a:1,
		b:2,
		c:ref(3)
	})
	let x = ref(4)

	console.log(obj.a)
	console.log(obj.b)
	console.log(obj.c)
	console.log(x) */

// 数据
let house = ref(4)

// 方法
function changeToy() {
  // 其中在子组件Child1标签上定义的ref等于c1，此时就可以拿到子组件Child1的属性数据
  c1.value.toy = '小猪佩奇'
}
function changeComputer() {
  // 其中在子组件Child2标签上定义的ref等于c2，此时就可以拿到子组件Child2的属性数据
  c2.value.computer = '华为'
}

// 参数$refs的值是一个对象，包含所有的子组件实例对象
function getAllChild(refs: { [key: string]: any }) {
  console.log(refs)
  // 循环所有子组件实例对象
  for (let key in refs) {
    refs[key].book += 3
  }
}

// 向外部提供数据【其中defineXXX定义的都是宏函数】
defineExpose({ house })
</script>

<style scoped>
.father {
  background-color: rgb(165, 164, 164);
  padding: 20px;
  border-radius: 10px;
}

.father button {
  margin-bottom: 10px;
  margin-left: 10px;
}
</style>
